<template>
  <!-- 盒子将来echarts展示图形图标的节点 -->
  <div class="charts" ref="charts"></div>
</template>

<script setup lang="ts">
import 'echarts-liquidfill'
import { ref, onMounted, watch, computed } from 'vue'
import * as echarts from 'echarts'
import { useWeatherStore } from '@/stores/weather'
const weatherStore = useWeatherStore()

// 计算属性，根据 weather24data 计算 tempArray
const tempArray = computed(() => {
  return weatherStore?.weather24data?.map((data) => data.temp) || []
})

// 计算属性，根据 weather24data 计算 fxTimeArray
const fxTimeArray = computed(() => {
  return (
    weatherStore?.weather24data?.map((data) => {
      const date = new Date(data.fxTime)
      const hours = date.getHours()

      return hours
    }) || []
  )
})
//获取节点
let charts = ref()

onMounted(() => {
  setTimeout(function () {
    initmap()
  }, 1000)
})

const initmap = () => {
  //获取echarts类的实例
  let mycharts = echarts.init(charts.value)
  mycharts.setOption({
    tooltip: {
      trigger: 'item'
    },
    title: {
      text: '逐小时天气预报'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: fxTimeArray.value
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} °C'
      }
    },
    series: [
      {
        data: tempArray.value,
        type: 'line',
        smooth: true,
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
      }
    ]
  })
}

watch(
  fxTimeArray,
  () => {
    initmap()
  },
  {
    deep: true
  }
)
</script>

<style scoped>
.charts {
  width: 100%;
  height: 250px;
}
</style>
